<template>
  <div class="main">
    <div class="boxLeft">
      <div>{{ title }}</div>
      <div class="fontNum">{{ value }}{{ isShow ? "dB" : "" }}</div>
    </div>
    <van-slider
      v-model="valueNum"
      button-size="16px"
      @change="onChange"
      :max="max"
      :min="min"
      bar-height="4px"
      active-color="#0A59F7"
    />
  </div>
</template>

<script>
// import { Toast } from "vant";
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  props: ["title", "max", "min", "value", "isShow"],
  data() {
    return {
      valueNum: null,
    };
  },
  // mounted() {
  //   this.$nextTick(() => {
  //     this.valueNum = this.value;
  //   });
  // },
  // watch: {
  //   bleStatus(newV) {
  //     console.log('++++++++++++++++++++++++++++55',newV);
  //     if(newV == 4){
  //       this.masterVolume(0)
  //       this.ValDenoise(0)
  //     }
  //   },
  // },
  methods: {
    ...mapMutations("ble",['masterVolume','ValDenoise']),
    onChange(value) {
      // Toast("当前值：" + value);
      this.$emit("handlerVal", value);
    },
  },
  computed: {
    ...mapState({
      setMasterVolumeval: (state) => state.ble.masterVolume,
      bleStatus: (state) => state.ble.bleStatus,
    }),
  },
  watch: {
    value(newV, odlNew) {
      this.valueNum = newV;
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  background: var(--bg_contrast);
  border-radius: 16px;
  padding: 0 16px;
  margin: 12px;
  .boxLeft {
    width: 88px;
    color: var(--font);
    font-size: 16px;
    .fontNum {
      font-size: 12px;
      color: var(--font_gray);
    }
  }
}
</style>